<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 转换 - 空间缩放</title>
  <style>
    body {
      padding: 0 40px;
    }

    .box {
      width: 800px;
      height: 400px;
      margin: 0 auto;
      background-color: pink;
      perspective: 1000px;
    }

    .box .inner {
      width: 200px;
      height: 200px;
      background-color: red;

      /* 添加过渡动画，便于观察效果 */
      transition: transform 1s;
    }

    .box:hover .inner {
      /* transform: scaleX(1.2); */
      /* transform: scaleY(1.5); */
      /* transform: scaleZ(2); */
      transform: scale3d(1.2, 1.5, 2);
    }
  </style>
</head>
<body>
  <h3>空间缩放</h3>
  <p>在立体空间中沿着 x、y、z 轴 3 个方向进标签盒子进行缩放，相比平面缩放增加了 z 轴方向的缩放。</p>
  <div class="box">
    <div class="inner"></div>
  </div>
</body>
</html>